{include file="public/header"}
		<style>
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows{
				width: 100%;
				height: auto;
				padding: 8px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				color: #000000;
				font-weight: bold;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val{
				font-size: 0.28rem;
				color: #666666;
				padding: 4px 0;
			}
			.mainPage .contentBoxs .boxs1 .btnBox{
				width: 100%;
				height: auto;
				text-align: center;
			}
			.mainPage .contentBoxs .boxs1 .btnBox .btn{
				background-color: #394B8F;
				border: none;
				outline: none;
				height: 0.75rem;
				padding: 0 0.3rem;
				color: #fff;
				font-size: 0.3rem;
				letter-spacing: 3px;
				min-width: 2.2rem;
			}
			
		</style>
	
		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
                        {include file="public/logobox"}
						<div class="boxs1">
							<div class="titleBoxs">设备保修状态</div>
							<div class="centerBoxs">
								<div class="rows">
									<div class="lab">设备名称</div>
									<div class="val">{{datas.name ? datas.name:'无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">序列号</div>
									<div class="val">{{real_sn}}</div>
									<div class="val" v-if="allSn != ''" v-for="(item,index) in allSn">{{item}}</div>
								</div>
								<div class="rows">
									<div class="lab">激活日期</div>
									<div class="val">{{datas.addtime ? datas.addtime:'无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">激活人</div>
									<div class="val">{{datas.user ? datas.user:'无' }}</div>
								</div>
								
								<div class="rows">
									<div class="lab">激活公司</div>
									<div class="val">{{datas.com ? datas.com:'无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">保修期间</div>
									<div class="val">{{datas.endtime ? datas.endtime:'暂无激活'}}</div>
								</div>
								
								<div class="rows">
									<div class="lab">保修到期时限</div>
									<!-- <div class="val" v-if="!ifOverdue">距离保修结束还剩：{{time.D}}{{time.h}}{{time.m}}{{time.s}}</div> -->
									<div class="val" v-if="!ifOverdue">距离保修结束还剩：{{hm}}</div>
									<div class="val" v-if="ifOverdue">该设备保修已过期</div>
								</div>
								
							</div>
							<div class="btnBox">
								<button class="btn" v-on:click="navigation('/mobile/warrantyCard/index.html?sn='+sn)">保修详情</button>
								<!-- <router-link class="btn" :to="{ path: '/mobile/warrantyCard/index.html', query: { sn: '81239123123' }}">保修详情</router-link> -->
							</div>
						</div>
						{include file="public/footerbox"}
					</div>
				</div>
			</div>
		</div>
        <script type = "text/javascript">
		var real_sn="{$real_sn}";
            new Vue({
                el: '#index',
                data: function () {
                    return {
                        winHeight:document.documentElement.clientHeight+"px",
                        datas:[],
						sn:"",
						real_sn:real_sn,
						allSn:[],

						time: {
							D: "",
							h: "",
							s: "",
							m: ""
						},
						isEnd: false,
						// endTimes: "2021-06-23 23:59:59"
						endTimes: "",  //结束日期
						nowTime:"", //当前日期
                        hm:0, //剩余毫秒数
						ifOverdue:false,  //是否过期
                    }
                },
				// 创建页面
				created(){
					var _this=this;
					// 获取上一页面的参数
					var sn = decodeURI(window.location.href.split("?")[1]);
					_this.sn=sn.slice(3)
					_this.getDataTime();
				},
                //页面加载需要执行的方法
                mounted:function(){
					var _this=this;
					_this.getData();  
					_this.getAllSn();
                },
                methods: {
					// 获取当前时间
					getDataTime(){
						var _this=this;
						var today=new Date();
						var y=today.getFullYear();
						var m=today.getMonth();
						var d=today.getDate();
						var h=today.getHours();
						var i=today.getMinutes();
						var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
						m=m+1;
						d=_this.checkTime(d);
						m=_this.checkTime(m);
						i=_this.checkTime(i);
						s=_this.checkTime(s);
						_this.nowTime=y+"-"+m+"-"+d+" "+h+":"+i+":"+s;
						// console.log(y+"-"+m+"-"+d+" "+h+":"+i+":"+s);
					},
					checkTime(i){
						if (i<10){
							i="0" + i;
						}
						return i;
					},

					setEndTime() {
						let that = this;
						let interval = setInterval(function timestampToTime() {
							//var date = new Date(that.endTimes) - new Date(); //计算剩余的毫秒数
                            var date =that.hm;
							if (date <= 0) {
							that.isEnd = true;
							that.time = {
								D: "00",
								h: "00",
								s: "00",
								m: "00"
							};
							clearInterval(interval);
							} else {
							that.time.D = parseInt(date / 1000 / 60 / 60 / 24, 10); //计算剩余的天
							if (that.time.D < 1) {
								that.time.D = "1"+ "天";
							}else if(that.time.D < 10){
								that.time.D = (that.time.D+1) + "天";
							}else{
								that.time.D=(that.time.D+1) + "天";
							}
							that.time.h = parseInt((date / 1000 / 60 / 60) % 24, 10); //计算剩余的小时
							if (that.time.h < 10) {
								that.time.h = "0" + that.time.h + "时";
							}else{
								that.time.h = that.time.h + "时";
							}
							that.time.m = parseInt((date / 1000 / 60) % 60, 10); //计算剩余的分钟
							if (that.time.m < 10) {
								that.time.m = "0" + that.time.m + "分";
							}else{
								that.time.m = that.time.m + "分";
							}
							that.time.s = parseInt((date / 1000) % 60, 10); //计算剩余的秒数
							if (that.time.s < 10) {
								that.time.s = "0" + that.time.s + "秒";
							}else{
								that.time.s = that.time.s + "秒";
							}
							return that.time.D +"天" + that.time.h +"时" + that.time.m +"分" + that.time.s +"秒";
							}
						}, 1000);
						
					},




					//   返回
					goBack(){
						window.history.back(-1); 
					},
                    //跳转
                    navigation:function(url){
                        console.log(url);
                        location.href=url;
                    },
					// 获取页面数据
					getData:function(){
						var _this=this;
						console.log( _this.sn)
						axios.get('/api/mobile/getActiveStatus', {
							params: { sn: _this.real_sn }
						})
						.then(function (res) {
							// console.log(res);
							_this.datas=res.data.info;
							var endtime=res.data.info.endtime;
							endtime=endtime.substring(endtime.length - 10) + " 23:59:59";
							// endtime="2021-06-23 23:59:59";
							var oDate1 = new Date(endtime);
							var oDate2 = new Date(_this.nowTime);
							/*if(oDate1.getTime() >= oDate2.getTime()){
								// console.log("大")
								_this.endTimes=endtime;
								_this.ifOverdue=false;  //设备未过期
							} else {
								// console.log("小")
								_this.endTimes="";
								_this.ifOverdue=true;   //设备已过期
							}*/
                            if(res.data.info.djs=1){
                                _this.hm=res.data.info.hm+"天";
                                 
								_this.ifOverdue=false;  //设备未过期

                            }else{
                             
                                 //_this.hm=res.data.info.hm;
								_this.ifOverdue=true;   //设备已过期
                            }
							//_this.setEndTime();
							
						}).catch(function (error) {
							console.log(error);
						});
						// axios.post('/api/mobile/getActiveStatus', {
						// 	"sn": sn
						// }).then(function (res) {
						// 	console.log(res)
						// 	// _this.datas=res.data.info;
						// }, error => {
						// 	console.log(error);
						// })
					},
					// 获取所有的sn
					getAllSn:function(){
						var _this=this;
						// console.log( _this.sn)
						axios.get('/api/mobile/get_namebysn', {
							params: { sn: _this.real_sn }
						})
						.then(function (res) {
							// console.log("AA:",res);
							if(res.data.data.sn){
								var s = res.data.data.sn;
								_this.allSn=s.split(",");
							}else{
								_this.allSn=[];
							}
						}).catch(function (error) {
							console.log(error);
						});
					},
                },
            })
        </script>
        {include file="public/footer"}


